<template>
  <div>
    <div class="radios-box"  style="padding: 20px 0 10px 20px;">
      <el-radio-group v-model="tabIndex" @change="jumpInfo">
        <el-radio-button v-if="userPageAuth.userinfo" :label="1" name="1">用户管理表</el-radio-button>
        <el-radio-button v-if="userPageAuth.auth" :label="2" name="2">用户权限管理表</el-radio-button>
      </el-radio-group>
    </div>
    <div style="padding:10px 50px 30px">
      <el-row>
        <el-col :span="24">
          <noAuth :createFun="createFun">
            <div style="margin: 20px 0 30px">
              <el-button size="mini" @click="search">搜索</el-button>
              <el-button v-if="!notAdmin" size="mini" @click="add">增加</el-button>
              <el-button size="mini" @click="refresh">重置</el-button>
            </div>
            <el-table
              :data="userSearchObj"
              :border="true"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              class="customTableStyle"
              style="font-size:12px;">
              <el-table-column
                label="用户ID"
                min-width="60">
                <template slot-scope="scope">
                  <el-input :disabled="notAdmin" size="mini" v-model="scope.row.id" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="手机号(账号)"
                min-width="100">
                <template slot-scope="scope">
                  <el-input :disabled="notAdmin" size="mini" v-model="scope.row.account" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="密码"
                min-width="80">
                <template slot-scope="scope">
                  <el-input disabled size="mini" placeholder=""></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="姓名"
                min-width="110">
                <template slot-scope="scope">
                  <el-select :disabled="notAdmin" size="mini" filterable clearable v-model="scope.row.username" placeholder="请选择">
                    <el-option
                      v-for="item in sjList"
                      :key="item.xm"
                      :label="item.xm"
                      :value="item.xm">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="是否管理员"
                min-width="90">
                <template slot-scope="scope">
                  <el-select :disabled="notAdmin" size="mini" clearable v-model="scope.row.isAdmin" placeholder="请选择">
                    <el-option
                      label="是"
                      :value="1">
                    </el-option>
                    <el-option
                      label="否"
                      :value="0">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="是否超级管理员"
                min-width="110">
                <template slot-scope="scope">
                  <el-select :disabled="notAdmin" size="mini" clearable v-model="scope.row.supperAdmin" placeholder="请选择">
                    <el-option
                      label="是"
                      :value="true">
                    </el-option>
                    <el-option
                      label="否"
                      :value="false">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                min-width="80">
                <template :disabled="notAdmin" slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.remark" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="240">
                <template slot-scope="scope">
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :total="page.totalCount"
              :page-size="page.pageSize"
              :current-page.sync="page.currPage"
              style="margin-top: 10px;"
              background
              layout="total, slot, prev, pager, next"
              @current-change="search">
              <span>—&nbsp;&nbsp;&nbsp;共 {{page.totalPage}} 页</span>
            </el-pagination>
            <div v-if="addVisi" style="margin-top: 20px">
              <el-row>
                <el-col :span="24">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>增加</span>
                      <el-button style="float: right;  font-size:12px; padding: 7px 15px;margin-left:10px" type="text" @click="addClick">保存</el-button>
                      <el-button style="float: right;  font-size:12px; padding: 7px 15px;" type="text" @click="addVisi = false">取消</el-button>
                    </div>
                    <div>
                      <el-table
                        :data="addRecord"
                        :border="true"
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                        class="customTableStyle"
                        style="font-size:12px;">
                        <el-table-column
                          label="手机号(账号)"
                          min-width="100">
                          <template slot-scope="scope">
                            <el-input size="mini" v-model="scope.row.account" placeholder="请输入内容"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="密码"
                          min-width="80">
                          <template slot-scope="scope">
                            <el-input size="mini" v-model="scope.row.password" placeholder="请输入内容"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="姓名"
                          min-width="110">
                          <template slot-scope="scope">
                            <el-input size="mini" v-model="scope.row.username" placeholder="请输入内容"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="是否管理员"
                          min-width="80">
                          <template slot-scope="scope">
                            <el-select size="mini" clearable v-model="scope.row.isAdmin" placeholder="请选择">
                              <el-option
                                label="是"
                                :value="1">
                              </el-option>
                              <el-option
                                label="否"
                                :value="0">
                              </el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="是否超级管理员"
                          min-width="80">
                          <template slot-scope="scope">
                            <el-select size="mini" disabled clearable v-model="scope.row.supperAdmin" placeholder="请选择">
                              <el-option
                                label="是"
                                :value="true">
                              </el-option>
                              <el-option
                                label="否"
                                :value="false">
                              </el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="备注"
                          min-width="80">
                          <template slot-scope="scope">
                            <el-input size="mini" v-model="scope.row.remark" placeholder="请输入内容"></el-input>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-table
              :data="page.list"
              :border="true"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              highlight-current-row
              @row-click="rowClick"
              class="customTableStyle"
              style="font-size:12px;">
              <el-table-column
                label="用户ID"
                min-width="60">
                <template slot-scope="scope">
                  {{ scope.row.id }}
                </template>
              </el-table-column>
              <el-table-column
                label="手机号(账号)"
                min-width="100">
                <template slot-scope="scope">
                  {{ scope.row.account }}
                </template>
              </el-table-column>
              <el-table-column
                label="密码"
                min-width="80">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editRecord.id && scope.row.id == userId">
                    <el-input size="mini" v-model="editPw" placeholder="请输入内容"></el-input>
                  </div>
                  <div v-else>******</div>
                </template>
              </el-table-column>
              <el-table-column
                label="姓名"
                min-width="110">
                <template slot-scope="scope">
                  <div v-if="notAdmin">{{ scope.row.username }}</div>
                  <div v-else>
                    <div v-if="editVisi && scope.row.id == editRecord.id">
                      <el-input size="mini" v-model="editRecord.username" placeholder="请输入内容"></el-input>
                    </div>
                    <div v-else>{{ scope.row.username }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="是否管理员"
                min-width="90">
                <template slot-scope="scope">
                  {{ scope.row.isAdmin == 0 ? '否' : '是' }}
                </template>
              </el-table-column>
              <el-table-column
                label="是否超级管理员"
                min-width="110">
                <template slot-scope="scope">
                  {{ scope.row.supperAdmin ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                min-width="80">
                <template slot-scope="scope">
                  <div v-if="notAdmin">{{ scope.row.remark }}</div>
                  <div v-else>
                    <div v-if="editVisi && scope.row.id == editRecord.id">
                      <el-input size="mini" v-model="editRecord.remark" placeholder="请输入内容"></el-input>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="240">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editRecord.id">
                    <el-button size="mini" @click="editClick">保存</el-button>
                    <el-button size="mini" @click="editVisi = false">取消</el-button>
                  </div>
                  <div v-else>
                    <el-button size="mini" @click="edit(scope.row)">修改</el-button>
                    <el-button v-if="!notAdmin" size="mini" @click="deleteClick(scope.row.id)">删除</el-button>
                    <el-button v-if="!notAdmin" size="mini" @click="resetPw(scope.row)">重置密码</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </noAuth>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import adapter from './adapter'
import imgUpload from '@/components/imgUpload'
import noAuth from '@/components/noAuth'
export default {
  name: 'userinfo',
  filters: {
  },
  components: {
    imgUpload,
    noAuth,
  },
  data() {
    return {
      ...adapter.data,
      tabIndex: 1, // tab序号
    }
  },
  computed: {
    ...adapter.computed
  },
  created() {
    // 初始化
    this.initPage()
    
  },
  mounted() {
  },
  methods: {
    ...adapter.methods,
    createFun() {
      this.getListSj()
      this.search()
    },
    /**
     * 跳转车辆/员工信息
     */
    jumpInfo(tabIndex) {
      console.log(tabIndex)
      if (tabIndex == 2) {
        this.$router.push('auth')
      }
    },
    // 打印图片
    async printPic(code) {
      const printHtml = document.getElementById('printDiv').innerHTML
      const wind = window.open('', 'newwindow', 'height=600, width=1000, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
      // wind.document.title = '结算单'
      wind.document.body.innerHTML = printHtml
      wind.print()
      return false
    },
  }
}
</script>

<style lang="scss" scoped>
.el-input-number{
  width: 90px;
}
.car-detail-title{
  font-size: 30px;
  text-align: center;
}
</style>

